<script setup>
	// import {
	// 	ref,
	// 	onMounted
	// } from 'vue';
	// import MQTT from 'mqtt/dist/mqtt.js';

	// const mqtt = MQTT;

	// const MQTTINIT = () => {
	// 	const options = {
	// 		connectTimeout: 4000,
	// 		clientId: 'hx',
	// 		username: 'b0b97b6b5ee4f6a20c7a9d93cbb2b20e',
	// 		password: 'root',
	// 		port: 8083
	// 	}
	// 	const client = mqtt.connect('ws://t.yoyolife.fun/mqtt', options);

	// 	// 连接成功时的回调函数
	// 	client.on('connect', function() {
	// 		console.log('连接成功！');
	// 		// 订阅主题
	// 		client.subscribe('/iot/5079/hx', {
	// 			qos: 0
	// 		}, (err) => {
	// 			if (!err) {
	// 				console.log('订阅成功');
	// 			}
	// 		});
	// 	});

	// 	// 接收消息
	// 	client.on('message', (topic, message) => {
	// 		console.log(JSON.parse(message));
	// 	});

	// 	client.on('reconnect', (error) => {
	// 		console.log('正在重新连接', error);
	// 	});

	// 	client.on('error', (error) => {
	// 		console.log('连接失败', error);
	// 	});

	// };

	// onMounted(() => {
	// 	// 在组件加载后访问 MQTT 对象
	// 	console.log(mqtt);
	// 	// 进行 MQTT 相关操作
	// });
	const leftBar_list = [{
		id: 0,
		type: 'home',
		name: '主屏幕',
		url: '/pages/index/index'
	}, {
		id: 1,
		type: 'videocam',
		name: '多媒体播放',
		url: '/pages/music/music'
	}, {
		id: 2,
		type: 'contact',
		name: '天气',
		url: '/pages/weather/weather'
	}, {
		id: 3,
		type: 'cart',
		name: '车辆信息',
		url: '/pages/car_info/car_info'
	}]
	const goDetail = (url) => {
		uni.navigateTo({
			url: url
		})
	}
</script>
<template>
	<!-- <view>
		<text @click="MQTTINIT">Click me to connect MQTT</text>
	</view> -->
	<view class="box">
		<view class="leftBar">
			<view v-for="(item,index) in leftBar_list" :key="item.id" class="leftBar_item" @click="goDetail(item.url)">
				<view>
					<uni-icons :type=item.type size="100" color="#fff"></uni-icons>
				</view>
				<text>{{item.name}}</text>
			</view>
		</view>
		<view class="rightWindows">
			<view class="time_box">
				12:00
			</view>
		</view>
	</view>
</template>
<style scoped lang="scss">
	* {
		margin: 0;
		padding: 0;
	}

	.box {
		width: 3840rpx;
		height: 2160rpx;
		background-color: #333333;
		position: relative;

		.leftBar {
			left: 200rpx;
			top: 280rpx;
			width: 380rpx;
			height: 1600rpx;
			color: #fff;
			background-color: #555555;
			border-radius: 48rpx;
			position: absolute;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			text-align: center;
		}

		.rightWindows {
			left: 880rpx;
			top: 288rpx;
			width: 2600rpx;
			height: 1586rpx;
			background-color: #555555;
			border-radius: 48rpx;
			position: absolute;

			.time_box {
				left: 96rpx;
				top: 100rpx;
				width: 1024rpx;
				height: 460rpx;
				color: #fff;
				font-size: 400rpx;
				position: absolute;
			}
		}
	}
</style>